<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
    <style>
        body {
            display: flex;
            justify-content: center; 
            align-items: center;   
            height: 100vh;  
            margin: 0;            
            background-image: url('tupian.png'); 
            background-size: cover;  
            background-position: center; 
            background-repeat: no-repeat; 
            position: relative;     
        }
        body::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.7); 
            z-index: -1; 
        }
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse; 
        }
        th, td {
            padding: 12px; 
        }
        form {
            width: 100%;
            max-width: 800px; 
            box-sizing: border-box; 
        }
        h2 {
            text-align: center;
        }
        .captcha-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .captcha-code {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 5px;
            padding: 5px 10px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            user-select: none;
        }
        .city-search-container {
            position: relative;
            width: 100%;
        }
        .city-input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .city-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #ccc;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
        }
        .city-suggestion-item {
            padding: 8px;
            cursor: pointer;
        }
        .city-suggestion-item:hover {
            background-color: #f0f0f0;
        }
        /* 增加输入框宽度 */
        input[type="text"], input[type="password"], input[type="date"], input[type="email"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
    </style>
    <script>
        
        // 当前选中的城市
        let selectedCity = "";
        
        // 页面加载时生成验证码
        window.onload = function() {
            generateCaptcha();
        };
        
        function validatePassword() {
            // 获取密码和确认密码的值
            var password = document.forms["registerForm"]["password"].value;
            var confirmPassword = document.forms["registerForm"]["confirm_password"].value;
            // 检查密码是否匹配
            if (password != confirmPassword) {
                alert("两次输入的密码不一致，请重新输入！");
                return false; // 返回false以阻止表单提交
            }
            return true; // 如果密码匹配则允许提交
        }
        
        function validateEmail(email) {
            // 简单的邮箱格式验证
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }
        
        function generateCaptcha() {
            var captcha = "";
            var captchaChars = "ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789";
            
            for (var i = 0; i < 4; i++) {
                var randomIndex = Math.floor(Math.random() * captchaChars.length);
                captcha += captchaChars.charAt(randomIndex);
            }
            
            document.getElementById("captcha-code").innerText = captcha;
            document.forms["registerForm"]["generated_captcha"].value = captcha;
        }
        
        function validateCaptcha() {
            var userInput = document.forms["registerForm"]["captcha"].value;
            var generatedCaptcha = document.forms["registerForm"]["generated_captcha"].value;
            
            if (userInput != generatedCaptcha) {
                alert("验证码输入错误，请重新输入！");
                generateCaptcha(); // 重新生成验证码
                return false;
            }
            return true;
        }
        
        function validateForm() {
            // 验证密码
            if (!validatePassword()) {
                return false;
            }
            
            // 验证邮箱
            var email = document.forms["registerForm"]["email"].value;
            if (email && !validateEmail(email)) {
                alert("邮箱格式不正确，请重新输入！");
                return false;
            }
            
            // 验证验证码
            if (!validateCaptcha()) {
                return false;
            }
            
            // 验证城市是否已选择
            if (!selectedCity) {
                alert("请选择居住城市！");
                return false;
            }
            
            return true;
        }
        
        // 城市搜索功能
        function searchCity() {
            const input = document.getElementById("city-input");
            const filter = input.value.toLowerCase();
            const suggestionsContainer = document.getElementById("city-suggestions");
            
            // 清空之前的建议
            suggestionsContainer.innerHTML = "";
            
            if (filter.length === 0) {
                suggestionsContainer.style.display = "none";
                return;
            }
            
            // 过滤城市数据
            const filteredCities = citiesData.filter(city => 
                city.toLowerCase().includes(filter)
            );
            
            // 显示建议
            if (filteredCities.length > 0) {
                filteredCities.forEach(city => {
                    const suggestionItem = document.createElement("div");
                    suggestionItem.className = "city-suggestion-item";
                    suggestionItem.textContent = city;
                    suggestionItem.onclick = function() {
                        selectCity(city);
                    };
                    suggestionsContainer.appendChild(suggestionItem);
                });
                suggestionsContainer.style.display = "block";
            } else {
                suggestionsContainer.style.display = "none";
            }
        }
        
        // 选择城市
        function selectCity(city) {
            document.getElementById("city-input").value = city;
            selectedCity = city;
            document.getElementById("selected-city").value = city;
            document.getElementById("city-suggestions").style.display = "none";
        }
        
        // 点击其他地方隐藏建议列表
        document.addEventListener('click', function(event) {
            const searchContainer = document.querySelector('.city-search-container');
            if (!searchContainer.contains(event.target)) {
                document.getElementById("city-suggestions").style.display = "none";
            }
        });
    </script>
</head>
<body>
    <form name="registerForm" action="DZY（页面）.html" method="post" onsubmit="return validateForm()">
        <h2>注册表单</h2>
        <table style="margin: 0 auto; width: 100%;">
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" required></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="password" required></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="confirm_password" required></td>
            </tr>
            <tr>
                <td>头像:</td>
                <td>
                    <input type="file" name="avatar" accept="image/*">
                </td>
            </tr>
            <tr>
                <td>昵称:</td>
                <td><input type="text" name="nickname"></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="email" name="email"></td>
            </tr>
            <tr>
                <td>生日:</td>
                <td>
                    <input type="number" name="birth_year" placeholder="年份" min="1900" max="2025" style="width: 30%;">&nbsp;&nbsp;
                    <input type="number" name="birth_month" placeholder="月份" min="1" max="12" style="width: 30%;">&nbsp;&nbsp;
                    <input type="number" name="birth_day" placeholder="日期" min="1" max="31" style="width: 30%;">
                </td>
            </tr>
            <tr>
                <td>居住城市:</td>
                <td>
                    <div class="city-search-container">
                        <input type="text" id="city-input" class="city-input" placeholder="请输入城市或区县名称" oninput="searchCity()" autocomplete="off" required>
                        <input type="hidden" id="selected-city" name="city">
                        <div id="city-suggestions" class="city-suggestions"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>验证码:</td>
                <td>
                    <div class="captcha-container">
                        <div class="captcha-code" id="captcha-code" onclick="generateCaptcha()"></div>
                        <input type="text" name="captcha" placeholder="点击验证码可刷新" required>
                        <input type="hidden" name="generated_captcha">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="注册">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>